<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
<link href="/user/css/style.css" rel="stylesheet" type="text/css" />
<script src="/user/js/jquery.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>线下充值-会员中心</title>
</head>
<body class="body">
<div class="main">
<div class="editzl">
	<header id="header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
		<h1 id="t0">线下充值</h1>
		<div class="u-right" href="#">
			<a href="czlist.php" class="hSearch right">充值记录</a>
		</div>
	</section>
</header><form class="xx">
    {if($info['Id']>0)}
    <p style='width:75%; margin:0 auto;'><img style='width:100%; height:auto;' src='{$set[skpic]}' /></p>
    {else}
    <p style='width:75%; margin:0 auto;'><img style='width:100%; height:auto;' src='{$set[skpic]}' /></p>
    {/if}
	<div class="edit">
    	<div id="ziliao" class="skFangshi">				
    		<div style="padding-top:15px;">
    			<div class="gerenUpload">
    			  <input type="file" id="upload1" name="" value='' />
    			  <input type="hidden" id="img1" name="img2" value='{$info[uppic]}' />
    			  {if($info['uppic'])}
    			  <img  src="{$info[uppic]}" id="moren1">
    			  {else}
    			  <img src="/skin/img/mr.png" style='width:50%; height:auto;'  alt="" id="moren1">
    			  <p style='border:0'>打款截图</p>
    			  {/if}			
    			</div>
                <input style='height: 26px;
    line-height: 26px;
    text-align: center;
    width: 80%;
    display: block;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 5px;' type="text" name="cash" placeholder="请输入充值金额" value="{$info[cash]}" />
    		</div>
    	</div>
      <p style="text-align:center; color:#fff;">注：打款完成后填写信息上传打款截图！</p>
	</div>
	<button class="xtj" type="button" onclick="edit();">确认充值</button>
	</form>
</div>
</div>
{if($info['Id']==0)}
<script>
const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg'];
  const MAXSIZE = 1024 * 1024 * 2;
  const MAXSIZE_STR = '2MB';

  function convertImageToBase64(file, callback) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.addEventListener('load', function(e){
      // console.log(e.target.result);
      // console.log(reader.result);
      const base64Image = e.target.result;
      callback && callback(base64Image);
      reader = null;
    })
/*    reader.readAsDataURL(file);*/
  }
  // 图片压缩
  function compress(base64Image, callback){
    // console.log(base64Image);
    let maxW = 640;
    let maxH = 640;
    const image = new Image();
    image.addEventListener('load', function(e){
      let ratio; //图片的压缩比
      let needCompress = false; // 是否需要压缩
      if(maxW < image.naturalWidth) {
        needCompress = true;
        ratio = image.naturalWidth / maxW;
        maxH = image.naturalHeight / ratio;
      }
      //经过处理后，实际图片的尺寸为1024 * 640;
      if(maxH < image.naturalHeight) {
        needCompress = true;
        ratio = image.naturalHeight / maxH;
        maxW = image.naturalWidth / ratio;
      }
      if(!compress) {
        maxW = image.naturalWidth;
        maxH = image.naturalHeight;
      }//如果不需要压缩，需要获取图片的实际尺寸

      const canvas = document.createElement('canvas');
      canvas.setAttribute('id','__compress__');
      canvas.width = maxW;
      canvas.height = maxH;
      canvas.style.visibility = 'hidden';
      // document.body.appendChild(canvas);

      const ctx = canvas.getContext('2d');
      ctx.clearRect(0,0,maxW,maxH);
      ctx.drawImage(image, 0, 0, maxW, maxH);
      // toDataURL的第二个参数表示图片质量，取值为0-1 1为原图
      const compressImage = canvas.toDataURL('image/jpeg', 0.5);
      callback && callback(compressImage);

      //在页面上展示压缩后的图片
      
      // console.log('压缩比:'+image.src.length / _image.src.length);
    });
    image.src = base64Image;
    // document.body.appendChild(image);

  }
  //获得压缩后的base64
  function uploadToServer(compressImage) {    
    //这里调用上传图片base64编码的接口
    //console.log('upload to server...', compressImage);
    compressImage = encodeURIComponent(compressImage);
    $.ajax({
				type:"post",
				dataType:"json",
				url:"/Moudelu.php?m=m&a=upload",
				data:"img="+compressImage,
				success:function(d){
					if(d[0]==0){
						alert(d[1]);
					}
					else{
            if(type==1){
              $("#moren").attr('src',d[1]);
              $("#img").attr("value",d[1]);
              $("#tj").addClass("tj");
            }else{
              $("#moren1").attr('src',d[1]);
              $("#img1").attr("value",d[1]);
              $("#tj").addClass("tj");
            }
					  
					}
				}
			});	
  }

  const upload1 = document.getElementById('upload1');
  upload1.addEventListener('change', function(e){
    type = 2;
    console.log(e.target.files);
    const [file] = e.target.files;
    if(!file) {
      return;
    }
  
    const { type: fileType, size: fileSize } = file;

    //图片支持类型检查
    if(!ACCEPT.includes(fileType)) {
      alert(`不支持[${fileType}]文件类型!`);
      upload.value = '';
      return;
    }

    //图片容量检查
    if(fileSize > MAXSIZE) {
      alert(`文件大小超出${MAXSIZE_STR}!`);
      upload.value = '';
      return;
    }

    //压缩图片
    convertImageToBase64(file, (base64Image) => compress(base64Image, uploadToServer));
  });  
function edit(){
	$.ajax({
		type:"post",
		dataType:"json",
		url:"/Moudelu.php?m=m&a=cashcz",
		data:$(".xx").serialize(),
		success:function(d){
			if(d[0]==2){
				window.location.href='login.php';return false;
			}
			if(d[0]==0){
				alert(d[1]);
			}
			else{
				alert(d[1]);
				window.location.href='czlist.php';
			}
		}
	});
}
</script>
{/if}
{include(foot)}
</body>
</html>